import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';

const StationLeftMeta: ComponentMetadata = {
  componentName: 'StationLeft',
  title: '设施环境左侧',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '设施环境',
  category: '数据展示',
  priority: 0,
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'StationLeft',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: '基础配置',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'title',
            title: '组件标题',
            setter: 'StringSetter',
            defaultValue: '站体面积汇总',
          },
          {
            name: 'englishTitle',
            title: '英文标题',
            setter: 'StringSetter',
            defaultValue: 'Station area summary',
          },
        ],
      },
      {
        title: '面积统计配置',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'totalArea',
            title: '总计面积',
            setter: 'NumberSetter',
            defaultValue: 1225675,
          },
          {
            name: 'areaUnit',
            title: '面积单位',
            setter: 'StringSetter',
            defaultValue: '平方米',
          },
        ],
      },
      {
        title: '图表配置',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'chartData',
            title: '图表数据',
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        {
                          name: 'name',
                          title: '名称',
                          setter: 'StringSetter',
                        },
                        {
                          name: 'value',
                          title: '数值',
                          setter: 'NumberSetter',
                        },
                      ],
                    },
                  },
                },
              },
            },
            defaultValue: [
              { name: '站台东侧', value: 38000 },
              { name: '站台北侧', value: 38000 },
              { name: '站台西侧', value: 38000 },
              { name: '商业北', value: 38000 },
              { name: '商业东', value: 38000 },
              { name: '站厅西北侧', value: 38000 },
              { name: '站厅西南侧', value: 38000 },
              { name: '站厅东侧', value: 38000 },
              { name: '7-11车站', value: 38000 },
              { name: '7-11车站', value: 38000 },
              { name: '7-11车站', value: 38000 },
              { name: '7-11车站', value: 38000 },
              { name: '7-11车站', value: 38000 },
            ],
          },
          {
            name: 'chartWidth',
            title: '图表宽度',
            setter: 'NumberSetter',
            defaultValue: 460,
          },
          {
            name: 'chartHeight',
            title: '图表高度',
            setter: 'NumberSetter',
            defaultValue: 220,
          },
          {
            name: 'yAxisMax',
            title: 'Y轴最大值',
            setter: 'NumberSetter',
            defaultValue: 40000,
          },
          {
            name: 'barWidth',
            title: '柱条宽度',
            setter: 'NumberSetter',
            defaultValue: 20,
          },
        ],
      },
      {
        title: '事件处理',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'onChartClick',
            title: '图表点击事件',
            setter: 'FunctionSetter',
          },
          {
            name: 'onClick',
            title: '点击事件',
            setter: 'FunctionSetter',
          },
        ],
      },
      {
        title: '外观',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'style',
            title: '自定义样式',
            setter: 'StyleSetter',
          },
          {
            name: 'className',
            title: '自定义类名',
            setter: 'StringSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: ['onClick', 'onChartClick'],
    },
    component: {},
  },
};

const snippets: Snippet[] = [
  {
    title: '设施环境左侧',
    screenshot: '',
    schema: {
      componentName: 'StationLeft',
      props: {
        title: '站体面积汇总',
        data: [
          { name: '设备报警', value: 10, color: '#4D74FF' },
          { name: '人品报警', value: 20, color: '#5AF3B8' },
          { name: '119联动', value: 30, color: '#93DBFF' }
        ],
        colorScheme: ['#4D74FF', '#5AF3B8', '#93DBFF'],
        englishTitle: 'Station area summary',
        totalArea: 1225675,
        areaUnit: '平方米',
        chartData: [
          { name: '站台东侧', value: 38000 },
          { name: '站台北侧', value: 38000 },
          { name: '站台西侧', value: 38000 },
          { name: '商业北', value: 38000 },
          { name: '商业东', value: 38000 },
          { name: '站厅西北侧', value: 38000 },
          { name: '站厅西南侧', value: 38000 },
          { name: '站厅东侧', value: 38000 },
          { name: '7-11车站', value: 38000 },
          { name: '7-11车站', value: 38000 },
          { name: '7-11车站', value: 38000 },
          { name: '7-11车站', value: 38000 },
          { name: '7-11车站', value: 38000 },
        ],
        chartWidth: 460,
        chartHeight: 220,
        yAxisMax: 40000,
        barWidth: 20,
      },
    },
  },
];

export default {
  ...StationLeftMeta,
  snippets,
};
